const { Input, Form, message, Button, Spin, Row } = antd;

function Load() {
    const { loading, run: modifyHandler } = useRequest(values => {
        console.log(values);
        if (!values) {
            message.warn('请输入密码');
            return;
        }

        request
            .get('/user/modifyPassword', {
                params: {
                    password: values,
                },
            })
            .then(res => {
                if (typeof res === 'boolean') {
                    if (res) {
                        message.success('修改成功');
                    } else {
                        message.error('修改失败');
                    }
                } else {
                    message.error('修改失败');
                }
            })
            .catch(res => {
                message.error('修改失败');
                console.log(res);
            });
    });

    return (
        <Spin spinning={loading}>
            <div style={{ display: 'flex', flexDirection: 'column', justifyContext: 'center', alignItems: 'center' }}>
                <h1 style={{ margin: '50px 0px' }}>修改密码</h1>
                <Form
                    style={{ width: '500px' }}
                    layout='vertical'
                    onFinish={values => {
                        modifyHandler((values || {}).password);
                    }}>
                    <Form.Item name='password' rules={[{ required: true, message: '请输入密码' }]}>
                        <Input type='password' />
                    </Form.Item>
                    <Row justify='center'>
                        <Button htmlType='submit' type='primary'>
                            修改
                        </Button>
                    </Row>
                </Form>
            </div>
        </Spin>
    );
}
